Event.observe( window, 'load', function () {
	
	$$('div.add').each( function ( el ) {
		el.observe( 'click', toevoegenWinkelwagentje );
	});
	$$('div.rem').each( function ( el ) {
		el.observe( 'click', verwijderenWinkelwagentje );
	});
	
	$$("*").findAll(function(node){
	
		return node.getAttribute('title');
       
	}).each(function(node){
	
		new Tooltip( node, 'tooltip_' + node.id.substr(8) );
		node.removeAttribute("title");
	});

});

function toevoegenWinkelwagentje ( el )
{
	
	var ontwerpId = this.id.split("_")[1];
	var quantity = 1;
	new Ajax.Request( "ajax/toevoegenWinkelwagentje.php",
    {
      method: 'post',
      parameters: { ontwerpId: ontwerpId, quantity: quantity },
      onSuccess: function( transport )
      {
				// DOM aanpassen
				response = transport.responseText.evalJSON();
				$('ppu_' + ontwerpId).update( '&euro; ' + response.ppu );
				$('prijs_' + ontwerpId).update( response.prijs );
				$('prijs_totaal').update( response.totaal );
				$('portkosten').update( response.portkosten );
				$('qty_' + ontwerpId).firstChild.nodeValue++;
				//$('qty_' + ontwerpId).setStyle( { backgroundColor: '#ffffff', opacity: 1 } );
				new Effect.Highlight($('qty_' + ontwerpId), { startcolor: '#ff3684', endcolor: '#DFECF2', duration: 0.3 });
				$('qty_' + ontwerpId).style.backgroundColor = '#DFECF2';
      }
    }
  );
}

function verwijderenWinkelwagentje ( el )
{
	var ontwerpId = this.id.split("_")[1];
	new Ajax.Request( "ajax/verwijderenWinkelwagentje.php",
    {
      method: 'post',
      parameters: { ontwerpId: ontwerpId },
      onSuccess: function( transport )
      {
			// DOM aanpassen
			if ( $('qty_' + ontwerpId).firstChild.nodeValue == 1 ) {
				$('header_cart_items').firstChild.nodeValue--;
				if ( $$('tr.cartItem').length > 1 ) {
					$('item_' + ontwerpId).remove();
				} else {
					$('cartContainer').remove();
					$('empty').show();
				}
			} else {
				response = transport.responseText.evalJSON();
				$('ppu_' + ontwerpId).update( response.ppu );
				$('prijs_' + ontwerpId).update( response.prijs );
				$('prijs_totaal').update( response.totaal );
				$('portkosten').update( response.portkosten );
				$('qty_' + ontwerpId).firstChild.nodeValue--;
				new Effect.Highlight($('qty_' + ontwerpId), { startcolor: '#ff3684', endcolor: '#DFECF2', duration: 0.3 });
				$('qty_' + ontwerpId).style.backgroundColor = '#DFECF2';
			}
      }
    }
  );
}